<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双色球摇奖</title>
		<style type="text/css">
			div {
				margin: auto;
				text-align: center;
			}

			table,
			th {
				border: 2px solid #000000;
				border-collapse: collapse;
				width: 700px;
				height: 60px;
				margin: auto;
				margin-bottom: 20px;
			}
		</style>
		<script>
			function start() {
				//禁用按钮
				//document.getElementById("startBtn").disabled = "disabled";
				
				//解除按钮的事件
				document.getElementById("startBtn").onclick="";
				
				//document.getElementById("startBtn").removeEventListener("click",start);
				
				//定义数组
				var arr = new Array();
				//初始化数组
				for (var i = 0; i < 32; i++) {
					arr[i] = i + 1;
				}
				//随机抽五个,要求不重复
				var result = "";
				for (var i = 0; i < 5;) {
					var radIdx = Math.floor(Math.random() * 32);
					var radElt = arr[radIdx];
					if (radElt == -1) {
						continue;
					}
					if(radElt<10){
						radElt = '0' + radElt;
					}
					//拼接表格中单元格结果
					result += "<th>" + radElt + "</th>"
					arr[radIdx] = -1;
					i++;
				}
				//把结果显示回表格中
				document.getElementById("data").innerHTML = result;
				//开启定时器
				t = setTimeout(start,1000);
			}
			
			function end(){
				//结束定时器
				clearTimeout(t);
				//恢复按钮的状态
				//document.getElementById("startBtn").disabled = "";
				
				//恢复按钮的事件
				document.getElementById("startBtn").onclick = start;
			}
		</script>
	</head>
	<body>
		<div id="">
			<table>
				<tr id="data">
					<th></th>
					<th></th>
					<th></th>
					<th></th>
					<th></th>
				</tr>
			</table>
			<input type="button" value="开始摇奖" id="startBtn" onclick="start()"/>
			<input type="button" value="结束摇奖" onclick="end()" />
		</div>
	</body>
</html>
